<template>
  <div class>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane name="first" :disabled="tabDisabled1">
        <span slot="label">创建表</span>
        <el-form
          size="mini"
          inline
          :model="codeForm"
          label-width="100px"
          class="demo-ruleForm"
          ref="codeForm"
        >
          <el-form-item label="默认前缀" prop="tableNamePrefix" style="width:300px">
            <el-input size="mini" disabled v-model="codeForm.tableNamePrefix" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item
            label="表名"
            :rules="{required:true,message:'请输入表名！',tirgger:'change'}"
            prop="tableName"
            style="width:300px"
          >
            <el-input size="mini" v-model="codeForm.tableName" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="主键策略" prop="keyStrategy" style="width:300px">
            <el-select
              size="mini"
              disabled
              placeholder="默认UUID"
              clearable
              v-model="codeForm.keyStrategy"
              style="width:200px"
            >
              <el-option label="UUID" value="UUID"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" width="50" fixed>
            <template slot="header">
              <el-button
                size="mini"
                class="el-icon-circle-plus"
                type="text"
                @click.prevent="addRow()"
              ></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                class="el-icon-remove"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="列名" align="center" width="180px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnName" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="物理类型" align="center" width="180px">
            <template slot-scope="scope">
              <el-select size="mini" clearable v-model="scope.row.propertyType">
                <el-option label="char" value="char"></el-option>
                <el-option label="varchar" value="varchar"></el-option>
                <el-option label="decimal" value="decimal"></el-option>
                <el-option label="datetime" value="datetime"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="长度" align="center" width="130px">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                style="width:100%"
                v-model="scope.row.length"
                :min="0"
                label="描述文字"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小数点" align="center" width="130px">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                style="width:100%"
                v-model="scope.row.decimalPoint"
                :min="0"
                label="描述文字"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="不是空" align="center" width="80px">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isNull"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="主键" align="center" width="50px">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.keyPrimary"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="说明" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.comment" size="mini"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-card class="ep-card ep-search">
          <el-row :gutter="0">
            <el-col :span="1.5" style="float:right">
              <el-button size="mini" @click="doTableGene">完成</el-button>
            </el-col>
            <el-col :span="1.5" style="float:right">
              <el-button size="mini" @click="doSearchTableGene">预览</el-button>
            </el-col>
          </el-row>
        </el-card>
        <el-dialog title="创建语句" :close-on-click-modal="false" :visible.sync="dialogVisible">
          <el-input size="mini" type="textarea" v-model="searchDDL" :rows="18"></el-input>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="执行SQL语句">
        <sqlComponent ref="sqlComponent"></sqlComponent>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  components: {
    sqlComponent: require("@/pages/biz/code/sqlComponent.vue").default
  },
  data() {
    return {
      dialogVisible: false,
      searchDDL: "",
      sqlContent: "",
      activeName: "first",
      tabDisabled1: false,
      num: 1,
      codeForm: {
        tableNamePrefix: "def_",
        tableName: "",
        keyStrategy: ""
      },
      tableData: []
    };
  },
  mounted() {},
  methods: {
    //预览sql语句
    doSearchTableGene() {
      this.$refs.codeForm.validate(v => {
        if (v) {
          this.searchDDL = "";
          if (this.tableData.length == 0) {
            this.$message.error("列表不能为空！");
            return false;
          }
          let tabName = this.codeForm.tableNamePrefix + this.codeForm.tableName;
          let params = {
            tableName: tabName,
            keyStrategy: this.codeForm.keyStrategy,
            tableDataList: this.tableData
          };
          this.$api
            .post("/api/code/codeTableInfo/doSearchTableGene", params)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.searchDDL = res.retBody.ddlSql;
                this.dialogVisible = true;
              } else {
                this.dialogVisible = false;
                this.$message({
                  type: "error",
                  message: res.retHead.message
                });
              }
            });
        }
      });
    },
    doTableGene() {
      this.$refs.codeForm.validate(v => {
        if (v) {
          if (this.tableData.length == 0) {
            this.$message.error("列表不能为空！");
            return false;
          }
          let user = JSON.parse(sessionStorage.getItem("user"));
          let tabName = this.codeForm.tableNamePrefix + this.codeForm.tableName;
          let params = {
            tableName: tabName,
            keyStrategy: this.codeForm.keyStrategy,
            tableDataList: this.tableData,
            createUserId: user.id,
            createUserName: user.realName
          };
          this.$api
            .post("/api/code/codeTableInfo/doTableGene", params)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message({
                  type: "success",
                  message: "执行成功!"
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.retHead.message
                });
              }
            });
        }
      });
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    addRow() {
      var list = {
        columnName: "",
        comment: "",
        propertyType: "",
        length: "0",
        decimalPoint: "0",
        isNull: "",
        keyPrimary: ""
      };
      this.tableData.unshift(list);
    }
  }
};
</script>